<template>
  <div class="l-div">
    <div class="l-div-div">
      <div class="l-h1">
        <h1>OA</h1>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item prop="username" autocomplete="on">
            <el-input
              v-model="ruleForm.username"
              prefix-icon="el-icon-user-solid"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="ruleForm.password"
              :type="flag ? 'text' : 'password'"
              prefix-icon="el-icon-key"
              @keyup.native.enter="submitForm('ruleForm')"
            >
              <i
                slot="suffix"
                :class="[flag ? 'el-icon-minus' : 'el-icon-view']"
                autocomplete="auto"
                @click="flag = !flag"
              />
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-checkbox
          v-model="checked"
          class="rememberMe"
          style="text-align: left"
          >记住我</el-checkbox
        >
        <p
          style="text-align: right; color: #409eff; font-size: 14px"
          @click="forgetpass()"
        >
          忘记密码
        </p>
      </div>
    </div>
  </div>
</template>
<script>
const Base64 = require("js-base64").Base64;
export default {
  data() {
    return {
      // 密码状态
      flag: false,
      //登录字段
      ruleForm: {
        username: "",
        password: "",
      },
      checked: false,
      //前端验证登录
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.getCookie();
  },
  methods: {
    //忘记密码提示
    forgetpass() {
      this.$message({
        message: "请联系管理员初始化密码",
        type: "warning",
      });
    },
    //设置cookie
    setCookie(username, password, day) {
      let date = new Date(); // 获取时间
      date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * day); // 保存的天数
      // 字符串拼接cookie
      window.document.cookie =
        "username" + "=" + username + ";path=/;expires=" + date.toGMTString();
      window.document.cookie =
        "password" + "=" + password + ";path=/;expires=" + date.toGMTString();
    },
    //读取cookie 将用户名和密码回显到input框中
    getCookie() {
      if (document.cookie.length > 0) {
        let arr = document.cookie.split("; "); //分割成一个个独立的“key=value”的形式
        for (let i = 0; i < arr.length; i++) {
          let arr2 = arr[i].split("="); // 再次切割，arr2[0]为key值，arr2[1]为对应的value
          if (arr2[0] === "username") {
            this.ruleForm.username = arr2[1];
          } else if (arr2[0] === "password") {
            this.ruleForm.password = Base64.decode(arr2[1]); // base64解密
            this.checked = true;
          }
        }
      }
    },
    // //后端登录验证
    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       if (this.checked) {
    //         let password = Base64.encode(this.ruleForm.password);
    //         this.setCookie(this.ruleForm.username, password, 7);
    //       } else {
    //         this.setCookie("", "", -1);
    //       }
    //       this.$axios
    //         .get("/teacher/getlogin", {
    //           params: {
    //             username: this.ruleForm.username,
    //             password: this.ruleForm.password,
    //           },
    //         })
    //         .then((res) => {
    //           if (res.data.id != null) {
    //             this.$message({
    //               message: "欢迎登录",
    //               type: "success",
    //             });
    //             sessionStorage.setItem("userid", res.data.id);
    //             sessionStorage.setItem("token", res.data.id);
    //             this.$router.push("/classlist");
    //           } else {
    //             this.$message.error("抱歉，账户或密码错误");
    //           }
    //         });
    //     } else {
    //       this.$message.error("抱歉，账户或密码不能为空");
    //       return false;
    //     }
    //   });
    // },
  },
};
</script>
<style scoped>
.l-div {
  width: 100vw;
  height: 100vh;
  background: #2b73d1;
  overflow: hidden;
  background: url("../../assets/4.jpg") no-repeat;
  background-size: 100% 100%;
}
.l-div-div {
  width: 560px;
  height: 425px;
  margin: 10% auto;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.l-h1 {
  text-align: center;
  color: aquamarine;
  margin-top: 10px;
  font-weight: 700;
  font-size: 24px;
}
.rememberMe {
  position: absolute;
  left: 0%;
}
.el-form-item {
  margin-left: -99px;
  margin-top: 40px;
}
.el-input__inner {
  border: 1px solid hsla(0, 0%, 100%, 0.1);
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  color: white;
}
.el-button {
  width: 100%;
}
</style>